<template>
  <div class="flex hwita_search">
    <el-row justify="space-between" class="flex1">
      <el-col :span="24">
        <el-form :model="tableConfig.formData" ref="searchForm" :label-width="tableConfig.labelWidth">
          <el-row>
            <el-col :span="tableConfig.span" v-for="(field, index) in tableConfig.formItems.filter(v => v.show)" :key="field.prop">
              <el-form-item :label="field.label" :prop="field.prop">
                <component 
                  :is="getWidgetName(field)" 
                  v-model="tableConfig.formData[field.prop]"
                  :clearable="tableConfig.clearable" 
                  :value-format="['datetimerange'].includes(field.widgetType)?'YYYY-MM-DD HH:mm:ss': 'YYYY-MM-DD'" 
                  :type="field.widgetType||''"
                  :popper-options="{placement: (index+1) % Math.ceil(24/tableConfig.span) === 0 ? 'bottom-end' : 'bottom-start'}"
                  is-range 
                  range-separator="至" 
                  start-placeholder="开始时间" 
                  end-placeholder="结束时间" 
                  placeholder="请输入"
                  :default-time="['datetimerange'].includes(field.widgetType)?defaultTime:new Date(2000, 1, 1, 0, 0, 0)" 
                  >
                    <template v-slot="scope" v-if="field.options?.length>0">
                        {{JSON.stringify(scope) === '{}'?'': scope}}
                        <el-option v-for="item in field.options" :key="item.label" :label="item.label" :value="item.value"></el-option>
                  </template>
                </component>
              </el-form-item>
            </el-col>
            <slot name="search"/>
          </el-row>
        </el-form>
      </el-col>
    </el-row>
    <div class="flex pd20">
      <el-button type="primary" @click="emit('getList')">搜索</el-button>
      <ElButton @click="reset">重置</ElButton>
      <ElButton v-if="tableConfig.formItems?.length > 3" @click="toggle" plain :icon="isCollapse ? ArrowDown : ArrowUp" style="border: 0;">
        {{ isCollapse ? "展开" : "收起" }}
      </ElButton>
    </div>
  </div>
</template>
<script setup name="HwitaFilter">
import { ref, watch, computed, toRefs, defineProps, defineEmits } from 'vue'
import { ArrowDown, ArrowUp } from '@element-plus/icons-vue'
import { ElTimeSelect, ElSelect, ElTimePicker, ElDatePicker, ElInput, ElButton, ElRow, ElCol, ElForm, ElFormItem, ElOption, ElTreeSelect } from 'element-plus'

let props = defineProps(["tableConfig"])
let isCollapse = ref(false)
let emit = defineEmits(['getList', 'reset'])
const defaultTime = [
  new Date(2000, 1, 1, 0, 0, 0),
  new Date(2000, 2, 1, 23, 59, 59),
] // '00:00:00', '23:59:59'

let { tableConfig } = toRefs(props)
// 特殊处理: 时间类型组件
let getWidgetType = computed(() => (field) => {
  return field.type.replace(/[-|\_]/g, '')
})

watch(() => props.tableConfig.formItems, () => {
  if (tableConfig.value.formItems.length > 0) {
    toggle()
  }
})

// 获得组件名称
function getWidgetName(fld) {
    let obj = {
        timeSelect: ElTimeSelect,
        timePicker: ElTimePicker,
        datePicker: ElDatePicker,
        input: ElInput,
        select: ElSelect
    }
    return obj[fld.type]
}
// 重置
function reset() {
  for (let key in tableConfig.value.formData) {
    tableConfig.value.formData[key] = ''
  }
  emit('reset')
}

// 展开/收起
function toggle() {
  isCollapse.value = !isCollapse.value
  tableConfig.value.formItems.forEach((v, i) => {
    v.show = isCollapse.value ? (i < 3 ? true : false) : true
  })
}
</script>

<style lang="less" scoped>
.hwita_search {
  padding-top: 16px;
  background-color: #fff;
  border: 1px solid #ebeef5;
  border-radius: 5px;
  margin-bottom: 8px;
}

.flex {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
}
.flex1{
  flex: 1;
}
.pd20 {
  padding: 0 20px;
}
:deep(.el-form-item__label){
    margin-bottom: 0;
}
:deep(.el-form-item__content) {

  .el-input,
  .el-select {
    width: 100% !important;
  }
}
</style>
